<!DOCTYPE html>
<html>
<head>
	<title>物业列表list</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- head 中 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

	<!-- body 最后 -->
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

	<!-- 如果使用了某些拓展插件还需要额外的JS -->
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
	<script src="/static/js/template.js"></script>
	<!--<link href="../../css/zhangdan.css" rel="stylesheet" type="text/css" />-->
</head>

<style type="text/css">
	span{
		display: block;
	}
	html ,body, .context_w{
		height: 100%;
	}
	.context_tab{
		height: 60pt;
	}
	.now_title_time{
		height: 8rem;
		background-color: #F6F6F6;
		border-bottom: 0.5pt solid #afaaabf2;	}
	.time_yue,.fu_money{
		height: 4rem;
		width: 100%;
		float: left;
		text-indent: 1.5rem;
		line-height: 4rem;
	}
	.time_yue{
		font: 400 2rem/5rem "PingFang-SC-Bold";
	}
	.fu_money{
		font: 400 1.5rem/5rem "PingFang-SC-Bold";
		color: #888888;
	}
	.qian_money{
		height: 8rem;
		width: 50%;
		float: right;
		line-height: 6rem;
		font: 400 1.8rem/5rem "PingFang-SC-Bold";    color: #FF0000;
		text-align: center;
		padding-right: 1rem;
		position: relative;
	}




	.time_context{
		height: 11rem;
		width: 100%;
		border-bottom: 0.5pt solid #afaaabf2;
		text-indent: 1.5rem;
	}
	.context_type{
		height: 30%;
		float: left;
		width: 60%;
		font: 400 2rem/5rem "PingFang-SC-Bold";
	}
	.now_time_money{
		height: 100%;
		float: right;
		width: 40%;
		text-align: right;
		color: #FF0000;
		font: 400 1.8rem/5rem "PingFang-SC-Bold";
	}

	.context_name{
		height: 30%;
		float: left;
		width: 60%;
		font: 400 1.7rem/5rem "PingFang-SC-Medium";
		color: #333333;
	}
	.time_bet{
		height: 40%;
		float: left;
		width: 60%;
		font: 400 1.5rem/5rem "PingFang-SC-Medium";
		color: #888888;
	}

	.context_tab,.center_navbar{
		height: 85pt;
	}
	.context_wei_item{
		text-align: left;
		text-indent: 4rem;

	}
	.weui-navbar__item {
		font: 400 2rem/3rem"PingFang-SC-Bold";
	}


	.weui-cell__ft ,.weui-cell__ftt{
		display: inline-block;
		height: 16px;
		width: 16px;
		border-width: 0px 2px 2px 0;
		border-color: #27272f;
		border-style: solid;
		-webkit-transform: matrix(.71,.71,-.71,.71,0,0);
		transform: matrix(.71,.71,-.71,.71,0,0);
		top: -2px;


		margin-top: -4px;
		left: 9rem;
	}
	.weui-cell__ft {
		top: 43%;
		left: 9rem;
		position: absolute;
	}
	.weui-cell__ftt{
		position: absolute;
		top: 30%;
		margin-left: 6rem;
	}
	.oness{
		height: 90% !important;
		width: 100% !important;
	}
	.myimg{

		width: 40px;
		height: 40px;

	}

	p {
		font-size: 25px !important;
	}
	.js_grid{
		width: 20%;
	}


</style>
<body>

<div id="bottomb" class="weui-popup__container popup-bottom">
	<div class="weui-popup__overlay"></div>
	<div class="weui-popup__modal oness">



		<div class="weui-grids">
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/qb.png"  alt="">
				</div>
				<p class="weui-grid__label ">
					全部
				</p>
			</a>
		</div>




		<div class="weui-grids">
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/df.png"  alt="">
				</div>
				<p class="weui-grid__label">
					电费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/sf.png" alt="">
				</div>
				<p class="weui-grid__label">
					水费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/wyf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					物业费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/qnf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					取暖费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/zlf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					致冷费
				</p>
			</a>
		</div>





		<div class="weui-grids">
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/wf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					网费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/ljf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					垃圾费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/pwf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					排污费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/dhf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					电话费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/kdf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					宽带费
				</p>
			</a>
		</div>





		<div class="weui-grids">
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/rqf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					燃气费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/yxf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					有线费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/tcf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					停车费
				</p>
			</a>
			<a href="" class="weui-grid js_grid mygrid">
				<div class="weui-grid__icon myimg">
					<img src="/static/weixin/images/qtf.png"  alt="">
				</div>
				<p class="weui-grid__label">
					其他
				</p>
			</a>
		</div>







	</div>
</div>




<div class="context_w">
	<div class="weui-tab context_tab">
		<div class="weui-navbar  center_navbar">
			<a class="weui-navbar__item weui-bar__item--on context_wei_item open-popup" data-target="#bottomb" href="#tab1"  id="alljq">
				分类
				<div class="weui-cell__ft">
				</div>
			</a>

		</div>


	</div>


	<div class="content_center">
		<div class="contet_div" id="wuye-id">
						<div>
							<div class="now_title_time">
								<span class="time_yue">当月</span>
								<!--<span class="qian_money">
									<span class="qian_money_num">-￥3005.00</span>
										<div class="weui-cell__ftt">
										  </div>
									</span>-->
								<span class="fu_money">支出￥4005.00</span>
							</div>

							<div class="now_time_context">

								<div  class="time_context">
									<span class="context_type">房租</span>

									<span class="now_time_money">
											<span style="margin-right: 1rem;">-￥3000.00</span>
										</span>
									<span class="context_name">东关203 401室</span>
									<span  class="time_bet">2017-12-01 至 2018-12-31</span>

								</div>

							</div>

						</div>

		</div>
	</div>
</div>
</body>

<script src="/static/weixin/js/fastclick.js"></script>
<script>
    $(function() {
			FastClick.attach(document.body);

       	 weizinList();


    });

    function weizinList(){

        var url ="/weixin/findByOPEN_IDWUYEALLBill.do";
        $.ajax({
            url: url,
            dataType: "json",
            async: false,
            success: function (data) {
               var transporTypesLevel = template("wuyeList-template", {"data": data});
               $("#wuye-id").html(transporTypesLevel);
            }
        });
    }

    function toBillWuye(the){

			var billId = $(the).attr("data-id");
        var billType = $(the).attr("data-type");

		window.location.href="/weixin/wuye_info.do?billId="+billId;
	}

</script>



<!--所有物业账单集合-->
<script type="text/html" id="wuyeList-template">


		{{each data.list as pd index}}
		<div>
			<div class="now_title_time">
				<span class="time_yue">{{pd.DATA_TITAL.DATE_YUE}}</span>
				<!--<span class="qian_money">
					<span class="qian_money_num">-￥3005.00</span>
						<div class="weui-cell__ftt">
						  </div>
					</span>-->
				<span class="fu_money">支出￥{{pd.DATA_TITAL.priceNUM}}</span>
			</div>
			{{each pd.list as pdl index}}
			<div class="now_time_context" data-id="{{pdl.ID}}" data-type="{{pdl.BILL_TYPE}}" onclick="toBillWuye(this)">

				<div  class="time_context">
					<span class="context_type">{{pdl.BILL_NAME}}</span>

					<span class="now_time_money">
							<span style="margin-right: 1rem;">￥{{pdl.TOTAL_PRICE}}</span>
					</span>
					<span class="context_name">{{pdl.BUSINESS_NAME}} {{pdl.ROOM_NUM}}</span>
					<span  class="time_bet">{{pdl.START_DATE}} 至 {{pdl.END_DATE}}</span>

				</div>


				</div>
				{{/each}}
		</div>
		{{/each}}

</script>

</html>